<template>
	<view class="page">
		<view class="page-bg"></view>
		<uni-nav-bar ref="navBar" fixed statusBar :border="false" backgroundColor="transparent">
		</uni-nav-bar>
		<view class="container" :style="`height: calc(100vh - ${navBarHeight || 0}px);`">
			<view class="mine-inner flex item-center">
				<image class="cu-avatar" :src="userInfo.avatar"></image>
				<view class="flex flex-col justify-between right-col" style="height: 52px;">
					<view class="mine-name flex item-center justify-between">
						<view class="merchant-name-box">
							{{userInfo.merchantShortName}}
						</view>
						<view class="msg-box">
							 <!-- v-if="noReadCount>0" -->
							<view class="has-no-read" v-if="noReadCount>0"></view>
							<image src="@/static/image/center/mine-msg.png" class="mine-msg" @click="toMessage"></image>
						</view>
					</view>
					<view class="flex item-center justify-between">
						<view class="mine-id">ID:{{userInfo.merchantNo}}</view>
						<view  class="business-btn" v-if="showJoinBtn" @click="linkMainWeiXin">升级为策划人</view>
					</view>
				</view>
				<!-- v-if="showJoinBtn" -->
			</view>
			<view class="mine-price-total">
				<image src="@/static/image/center/price-bg.png" mode="" class="price-bg"></image>
				<view class="total-box flex justify-between item-center">
					<view>
						<view class="amt-title">可提现金(元)</view>
						
						<view class="amt-num">{{myDataInfo.totalAmt||0}}</view>
					</view>
					<view class="withdrawal-btn" @click="wallet">提现</view>
				</view>
				
			</view>
			<!-- <view class="bg-white radius-8 mx-16 px-16 py-12 mb-12">
				<PlannerMenusGroup />
			</view> -->
			<view class="menu-box">
				<image src="@/static/image/center/price-box-bg.png" mode="widthFix" class="price-box-bg"></image>
				<view class="menu-list bg-white radius-8 mx-16 px-16 py-12">
					<view class="flex justify-between item-center mb-12">
						<text class="text-color-regular fs-16 text-bold">商户管理</text>
					</view>
					<view class="grid col-4">
						<view v-for="(menu,i) in commonMenus" :key="i" class="flex-col center" style="margin-bottom: 10px;" @click="linkMenu(menu)">
							<button v-if="menu.type === 'button'" :open-type="menu.openType" class="non-bor flex-col center px-0" style="background-color:transparent;border:none;">
								<image class="mb-4 w-24 h-24" :src="menu.icon"></image>
								<text class="text-color-hint fs-12 leading-17">{{menu.title}}</text>
							</button>
							<template v-else>
								<image class="mb-4 w-24 h-24" :src="menu.icon"></image>
								<text class="text-color-hint fs-12">{{menu.title}}</text>
							</template>
							
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup name="Mine">
	import {
		computed,
		onMounted,
		ref,
		watch
	} from 'vue'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import PlannerMenusGroup from './components/planner-menus-group.vue'
	import { myPageApi,getNoReadCount } from '@/api/index.js'
	const userStore = useUserStore()
	let userInfo = computed(() => {
		return userStore.userInfo || {}
	})
	const navBar = ref(null)
	

	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})

	const commonMenus = ref([
		{
			title: '商品管理',
			icon: '../../static/svg/mine/menu-goods.svg',
			path: '/center/pages/goods/goods'
		},
		{
			title: '订单管理',
			icon: '../../static/svg/mine/menu-order.svg',
			path: '/center/pages/order/order'
		},
		{
			title: '联系客服',
			icon: '../../static/svg/mine/menu-service.svg',
			type: 'button',
			openType: 'contact'
		},
		{
			title: '核销记录',
			icon: '../../static/svg/mine/menu-record.svg',
			path: '/center/pages/verifyCode/pageVerifyRecord'
		},
		{
			title: '火火学院',
			icon: '../../static/svg/mine/menu-school.svg',
			path: '/center/pages/college/college'
		},
		{
			title: '我的策划人',
			icon: '../../static/svg/mine/menu-leader.svg',
			path: '/center/pages/agent/agent'
		},
		{
			title: '发票中心',
			icon: '../../static/svg/mine/menu-invoice.svg',
			path: '/center/pages/invoice/invoice'
		},
		{
			title: '设置',
			icon: '../../static/svg/mine/menu-setting.svg',
			path: '/center/pages/setting/setting'
		},
	])
	const noReadCount = ref(0)
	const getReadCount = async () => {
		let result = await getNoReadCount()
		if(result){
			noReadCount.value = result
		}else{
			noReadCount.value = 0
		}
	}
	const toMessage = () => {
		uni.navigateTo({
			url: '/center/pages/message/message',
			events: {
				reCount: (data) => {
					getReadCount()
				}
			},
		})
	}

	const linkMenu = (item) => {
		if(item.path){
			uni.navigateTo({
				url:item.path
			})
		}
	}
	const linkMainWeiXin = () => {
		uni.navigateToMiniProgram({
			  appId: 'wx9de1c129019aaab3',
			  path: `/applyPages/inviteApply/inviteApply?re=busi`,
			  envVersion: 'trial',
			  // extraData: {
			   
			  // },
			  success(res) {
			    // 打开成功
			  }
			})
	
	}
	let myDataInfo = ref({businessState:true})
	const showJoinBtn = ref(false)
	// const showJoinBtn = computed(() => {
	// 	console.log((myDataInfo.value && !myDataInfo.value.businessState))
	// 	return (myDataInfo.value && !myDataInfo.value.businessState)
	// })
	// console.log(showJoinBtn.value)
	const queryList = () => {
		// if (userStore.isAgent || userStore.isMerchant) {
		myPageApi().then(res => {
			myDataInfo.value = res
			showJoinBtn.value = !res.businessState
			// if(myDataInfo.value.popState){
			// 	joinPopRef.value.showPop(true)
			// 	savePopType(1)
			// }
			// paging.value.complete()
		})
		// } else {
		// 	paging.value.complete()
		// }
	}
	const wallet = () => {
		// return
		uni.navigateTo({
			url: '/wallet/pages/withdraw/withdraw-info',
			events: {
				reIndex: (data) => {
					// console.log(data,'ddd')
					queryList()
				}
			},
		})
	}
	onMounted(() => {
		getReadCount()
		queryList()
	})
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		height: 100vh;
		width: 100vw;
	}

	.page-bg {
		z-index: 0;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-image: radial-gradient(circle at left top, #D8230A26 30%, transparent 100%);
		background-size: 396px 396px;
		background-repeat: no-repeat;
		filter: blur(20px);
	}

	.container {
		z-index: 1;
		position: relative;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
	}
	// 个人中心头部
	.mine-inner{
		box-sizing: border-box;
		padding:20px;
		box-sizing: border-box;
		width: 100%;
		.cu-avatar{
			height: 52px;
			width: 52px;
			border-radius: 50%;
			margin-right: 10px;
		}
		.right-col{
			width: calc(100% - 70px);
		}
		.merchant-name-box{
			width: 60%;
			overflow:hidden;
			white-space:nowrap;
			text-overflow:ellipsis;
		}
		.mine-name{
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: 600;
			line-height: 28px;
		}
		.mine-msg{
			width: 16px;
			height: 16px;
			margin-left: 6px;
		}
		.business-btn{
			// width: 76px;
			height: 21px;
			padding: 2px 8px 2px 8px;
			border-radius: 16px;
			background: #FA4543;
			color: #ffffff;
			font-family: PingFang SC;
			font-size: 12px;
			font-weight: 400;
			line-height: 17px;
			letter-spacing: 0px;
			text-align: right;


		}
	}
	// 提现部分
	.mine-price-total{
		// width: 343px;
		height: 80px;
		margin-left: 20px;
		margin-right: 20px;
		padding: 0 20px;
		background: linear-gradient(180deg, #EC3422 0%, #DF5643 100%);
		position: relative;
		border-radius: 10px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		// margin-bottom: 20px;
		.price-bg{
			height: 80px;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
		.total-box{
			height: 70px;
			width: 100%;
		}
		.amt-title{
			font-family: PingFang SC;
			font-size: 12px;
			font-weight: 400;
			line-height: 17px;
			letter-spacing: 0px;
			text-align: left;
			color: rgba(255, 255, 255, 0.6);
		}
		.amt-num{
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: 600;
			line-height: 22px;
			height: 22px;
			letter-spacing: 0px;
			text-align: left;
			color: #ffffff;
			// margin-top: 4px;
		}
		.withdrawal-btn{
			width: 60px;
			height: 32px;
			border-radius: 16px;
			background: #FDEAD5;
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: 600;
			letter-spacing: 0px;
			text-align: center;
			color: #BC5B1E;
			line-height: 32px;
			position: relative;
			z-index: 2;
		}
	}
	.menu-box{
		position: relative;
		z-index: 2;
		.price-box-bg{
			width: 100%;
			position: absolute;
			top: -36px;
			left: 0;

		}
		.menu-list{
			position: relative;
			z-index: 2;
			margin-top: 20px;
		}
	}
	.mine-id{
		font-family: PingFang SC;
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		// letter-spacing: 0px;
		// text-align: center;
		color: rgba(51, 51, 51, 0.6);
	}
	.msg-box{
		position: relative;
		.has-no-read{
			position: absolute;
			width: 7px;
			height: 7px;
			border-radius: 50%;
			background-color: #EC3422;
			right: -2px;
			top: 3px;
			
		}
	}
</style>
